<template>

	<el-descriptions :column="settingStore.device === 'mobile'?1:2" border>
		<el-descriptions-item>
			<template #label>
				<span>{{ $t('部门名称') }}</span>
				<span v-if="isEditState" class="custom-validator-symbol">*</span>
			</template>
			<el-input ref="nameRef" v-if="isEditState" v-elInputCheck="{message: $t('请输入部门名称')}" v-model="departmentForm.name"/>
			<span v-else>{{ $t(`${currInfo.name}`) }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('唯一标识')" v-if="!isAdd">
			<span>{{ currInfo.id }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('租户唯一标识')">
			<span>{{ currInfo.tenantId }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('部门简称')">
			<el-input v-if="isEditState" v-model="departmentForm.aliasName" />
			<span v-else>{{ currInfo.aliasName }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('特定名称')">
			<el-input v-if="isEditState" v-model="departmentForm.deptGivenName" />
			<span v-else>{{ currInfo.deptGivenName }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('英文名称')">
			<el-input v-if="isEditState" v-model="departmentForm.enName" />
			<span v-else>{{ currInfo.enName }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('区域代码')">
			<el-input v-if="isEditState" v-model="departmentForm.divisionCode" />
			<span v-else>{{ currInfo.divisionCode }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('成立时间')">
			
			<el-date-picker
			v-if="isEditState"
			v-model="departmentForm.establishDate"
			type="date"
			format="YYYY-MM-DD"
			value-format="YYYY-MM-DD"
			:placeholder="$t('请选择')"
			style="width: 100%;">
			</el-date-picker>
			<span v-else>{{ currInfo.establishDate }}</span>
			
		</el-descriptions-item>
		<el-descriptions-item :label="$t('办公室')">
			<el-input v-if="isEditState" v-model="departmentForm.deptOffice" />
			<span v-else>{{ currInfo.deptOffice }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('传真号码')">
			<el-input v-if="isEditState" v-model="departmentForm.deptFax" />
			<span v-else>{{ currInfo.deptFax }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('电话号码')">
			<el-input v-if="isEditState" v-model="departmentForm.deptPhone" />
			<span v-else>{{ currInfo.deptPhone }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('邮政编码')">
			<el-input v-if="isEditState" v-model="departmentForm.zipCode" />
			<span v-else>{{ currInfo.zipCode }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('是否委办局')">
			<el-select v-if="isEditState" v-model="departmentForm.bureau" :placeholder="$t('请选择')" :size="fontSizeObj.buttonSize" > 
				<el-option v-for="(item,index) in $dictionary().boolean" :style="{ fontSize: fontSizeObj.baseFontSize }" :key="index" :label="item.name" :value="item.id" />
			</el-select>
			<span v-else>{{ currInfo.bureau ? $t('是'):$t('否') }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('部门地址')">
			<el-input v-if="isEditState" v-model="departmentForm.deptAddress" />
			<span v-else>{{ currInfo.deptAddress }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('自定义ID')">
			<el-input v-if="isEditState" v-model="departmentForm.customId" />
			<span v-else>{{ currInfo.customId }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('部门描述')" span="2">
			<el-input
				v-if="isEditState"
				type="textarea"
				:rows="3"
				v-model="departmentForm.description"
			/>
			<span v-else>{{ currInfo.description }}</span>
		</el-descriptions-item>
	</el-descriptions>
</template>

<script lang="ts" setup>
	import { $keyNameAssign, } from '@/utils/object'
	import { $dictionary } from '@/utils/data'
	import moment from "moment";
	import { useSettingStore } from "@/store/modules/settingStore"
	import { inject, ref, watch } from 'vue';
	const settingStore = useSettingStore()
	// 注入 字体对象
	const fontSizeObj: any = inject('sizeObjInfo');

	const props = defineProps({
		isAdd: {//是否为添加模式，添加模式有些字段不需要显示
			type: Boolean,
			default: false,
		},
		isEditState: {//是否为编辑状态
			type: Boolean
		},
		currInfo: {//当前信息
			type: Object,
			default: () => { return {} }
		}
	})
	const data = reactive({
		departmentForm: {//新增或编辑部门表单
			id:"",
			parentId:props.currInfo.id,
			name: "",//部门名称
			aliasName: "",//部门简称
			deptGivenName: "",//特定名称
			enName: "",//英文名称
			divisionCode: "",//区域代码
			establishDate: "",//成立时间
			deptOffice: "",//办公室
			deptFax: "",//传真号码
			deptPhone: "",//电话号码
			zipCode: "",//邮政编码
			bureau: false,//是否委办局
			deptAddress: "",//部门地址
			description: "",//部门描述
			tabIndex: null, // 排序
		
		},
		nameRef:"",
	})
	
	let {
		departmentForm,
		nameRef
	} = toRefs(data);
	
	watch(() => props.isEditState,(newVal) => {
		
			if(newVal){//编辑状态给表单赋值
				$keyNameAssign(departmentForm.value, props.currInfo);
			}
		}
	)

	watch(() => props.currInfo,(newVal) => {
			if(newVal){//编辑状态给表单赋值
			
				if(props.currInfo.establishDate != null){
					props.currInfo.establishDate = moment(props.currInfo.establishDate).format("YYYY-MM-DD");
				}
				$keyNameAssign(departmentForm.value, props.currInfo);
			}
		}
	)

	onMounted(()=>{
		if(props.currInfo.establishDate != null){
			props.currInfo.establishDate = moment(props.currInfo.establishDate).format("YYYY-MM-DD");
		}
	});
	
	defineExpose({
		departmentForm,
		validForm,
	})
	async function validForm() {
		if (!departmentForm.value.name) {
			nameRef.value.focus();
			setTimeout(()=>{
				nameRef.value.blur()
			},0)
	
			return false;
		}
		return true;
	}
	
</script>

<style lang="scss" scoped>
	
</style>